* {
    /*-webkit-webkit-box-sizing: border-box;
    -moz-webkit-box-sizing: border-box;
    -ms-webkit-box-sizing: border-box;
    -o-webkit-box-sizing: border-box;*/
    -webkit-webkit-transfor: background .2;
    -moz-webkit-transfor: background .2;
    -ms-webkit-transfor: background .2;
    -o-webkit-transfor: background .2;
}
body {
    background-color: #00334b;
    color: #333;
}
.container {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    padding: 10px;
}
h1 {
    text-align: center;
    color: #eee;
}
.task-list {
    margin: 10px 0;
}
.add-task input[type=text] {
    float: left;
    width: 81%;
    margin-right: 1%;
}
.add-task [type=submit] {
    background: #fff;
    width :15%;
}
input, .task-item, .task-detial-mask, textarea {
    border-radius: 3px;
    padding: 10px;
}
input[type=text],input[type=date] {
    border: 0;
    display: block;
    width: 94%;
    background: #eee;
}
input[type=text]:hover,input[type=date]:hover,input[type=text]:focus,input[type=date]:focus {
    background: #fff;

}
.task-item {
    background-color: #fff;
    color: #333;
    margin-bottom: 2px;
    -webkit-webkit-box-sha: 0 2px 3px rgba(0,0,0,.4);
    -moz-webkit-box-sha: 0 2px 3px rgba(0,0,0,.4);
    -ms-webkit-box-sha: 0 2px 3px rgba(0,0,0,.4);
    -o-webkit-box-sha: 0 2px 3px rgba(0,0,0,.4);
    cursor: pointer;
}
.task-item.completed {
    color: #aaa;
    background: rgba(255, 255, 255, .7);
}
.task-item.completed:after {
    content: " ";
    height: 1px;
    background: #aaa;
    width: 98%;
    position: relative;
    top: -10px;
    display: block;
    float: right;
}
.task-item:hover {
    background: #ddd;
}
.add-task [type=submit]:hover {
    background: #5fb9e4;
}
button {
    display: inline-block;
    border-radius: 3px;
    padding: 10px;
    border: 0;
    cursor: pointer;
}
.task-detial {
    background: #fff;
    padding: 10px;
    color: #333;
    position: absolute;
    top :0;
    right: 10px;
    width: 50%;
    display: none;
}
.task-detial .content {
    margin-top: 10px;
    padding: 10px;
    font-weight: 900;
    cursor: pointer;
}
.task-detial > * {
    margin-bottom: 10px;
}
textarea {
    max-height: 100px;
    width: 94%;
}

.task-detial-mask {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(30, 30, 30, .6);
    display: none;
}
.task-content {
    margin-left: 10px;
}
.fr {
    float: right;
}
.action {
    color: #888;
    font-size: 90%;
}
.action:hover {
    color: #333;
}
.msg {
    display: none;
    text-align: center;
    background: #ffe264;
    padding: 10px;
    color: #333;
}
.anchor {
    cursor: pointer;
}
.alerter {
    opacity: 0;
}